<template>
  <transition name="fly">
    <div v-if="show" ref="card" class="music-card" @scroll="scrollEvent">
      <div  class="top-bar">
        <div class="left-menu">
          <div class="back" @click="hideDetail">
            <i class="icon-back"></i>
            <span class="back-name">歌单</span>
          </div>
        </div>
        <div class="right-menu">
          <i class="search-btn icon-search"></i>
          <i class="menu-btn icon-list-circle"></i>
        </div>
        <div ref="top" class="backimg"></div>
      </div>
      <div ref="sheetInfoBar" class="info-part">
        <div class="info-bar">
          <div class="avatar-box">
            <img :src="sheetinfo.info[0].img_url" alt="">
          </div>
          <div class="info-box">
            <p class="sheet-name">{{sheetinfo.name}}</p>
            <p class="author-name">
              <img :src="sheetinfo.user.avatar" alt="">
              &nbsp;{{sheetinfo.user.name}}&nbsp;
              <i class="icon-right"></i>
            </p>
          </div>
        </div>
        <div class="center-menu-bar">
          <div class="menu-btn" v-for="item in menuList" :key="item">
            <i class="icon-music"></i>
            {{item}}
          </div>
        </div>
      </div>
      <div class="music-con">
        <div class="music-control">
          <div class="left-menu">
            <div class="play-all" @click="playAll">
              <i class="icon-music"></i>
              <span class="name">播放全部</span>
              <span class="count">(共{{sheetinfo.count}}首)</span>
            </div>
          </div>
          <div class="right-menu">
            <div class="btn">多选</div>
          </div>
        </div>
        <div class="music-bar" v-for="(item,index) in musicList" :key="item.id" @click="updateCurMusic(item.id)">
          <div class="num">
            <span v-if="item.id != curMusic.id">{{index + 1}}</span>
            <i v-if="item.id == curMusic.id" class="icon-volume-medium" :class="{'red':isPlaying}" ></i>
          </div>
          <div class="music-inner-bar">
            <p class="name">{{item.name}}</p>
            <p class="singer">{{item.singer}}</p>
          </div>
          <div class="menu-block" @click.stop="showBottomMenu(item.id,item.name)">
            <i class="icon-list-circle"></i>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import store from '../../store/index'

  export default {
    name: "sheet-detail",
    data() {
      return {
        menuList: ['收藏', '评论', '分享', '下载'],
        isShow:false
      }
    },
    computed: {
      show() {
        this.isShow = store.getters.getCurSheetShow;
        return store.getters.getCurSheetShow;
      },
      sheetinfo() {
        return store.getters.getSheetDetail;
      },
      musicList(){
        return store.getters.getSheetDetail.info;
      },
      curMusic(){
        return store.getters.getCurMusic;
      },
      isPlaying(){
        return store.getters.getPlay;
      }
    },
    methods: {
      hideDetail() {
        store.dispatch('set_CurSheetShow', false);
      },
      updateCurMusic(id){
        store.dispatch('updateCurmusic',id);
        store.dispatch('add_music2List',store.getters.getCurMusic);
        store.dispatch('set_play');
      },
      scrollEvent(){
        let opacity = this.$refs.card.scrollTop / (this.$refs.sheetInfoBar.offsetHeight - this.$refs.top.offsetHeight);
        if(opacity <1){
          this.$refs.top.style.opacity = opacity;
        }else{
          this.$refs.top.style.opacity = 1;
        }
      },
      showBottomMenu(id,name){
        store.dispatch('set_bottomMenuId',id);
        store.dispatch('set_bottomMenuTitle','音乐:'+name);
        store.dispatch('set_bottomMenuType','music');
        store.dispatch('set_bottomMenuShow',true);
      },
      playAll(){
        store.dispatch('add_sheet2List');
        //让其播放第一首歌
        store.dispatch('set_curMusic',store.getters.getSheetDetail.info[0]);
        store.dispatch('set_play');
      }
    },
    updated(){
      if(this.isShow){
        let img = store.getters.getSheetDetail.info[0].img_url;
        this.$refs.sheetInfoBar.style.backgroundImage = `url(${img})`;
        this.$refs.sheetInfoBar.style.backgroundSize = '5800%';
        this.$refs.sheetInfoBar.style.backgroundPosition = 'center center';
        this.$refs.top.style.backgroundImage = `url(${img})`;
        this.$refs.top.style.backgroundSize = '5800%';
        this.$refs.top.style.backgroundPosition = 'center center';
      }
    }
  }
</script>

<style scoped lang="scss">
  @import '../../../static/style/public';
  $rightMargin:20px;
  $infoHeight: 100px;
  $leftMargin: 20px;
  $menuBarHeight: 80px;
  $musicTopHeight:40px;
  $infoPartHeight:190px + $topHeight;
  $musicBarHeight:60px;
  $numSize:16px;
  .red{
    color:$primaryColor;
  }
  .music-card {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: $bottomHeight;
    z-index: 100;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: white;

    .top-bar {
      position: fixed;
      left:0px;
      top:0px;
      right:0px;
      z-index: 1000;
      height: $topHeight;
      color: white;
      transform:translateZ(0);
      .backimg{
        position:absolute;
        left:0px;
        right:0px;
        top:0px;
        bottom:0px;
        z-index: -1;
        opacity:0
      }
      .back{
        display: inline-block;

      }
    }

    .left-menu, .right-menu {
      position: absolute;
      top: 0px;
      width: 50%;
      height: $topHeight;
      font-size: 20px;
      i {
        line-height: $topHeight;
      }
    }
    .left-menu {
      left: 0px;
      i {
        padding-left: 10px;
      }
    }
    .right-menu {
      right: 0px;
      text-align: right;
      i {
        padding-left:10px;
      }
      i:nth-last-child(1){
        margin-right:$rightMargin;
      }
      div:nth-last-child(1){
        margin-right:$rightMargin - 15px;
      }
    }
    .info-part {
      padding-top: $topHeight;
      color: white;
      .info-bar {
        display: flex;
        width: 100%;
        height: $infoHeight;
        .left-menu,.right-menu{
          line-height: $topHeight;
        }
        .avatar-box {
          margin-left: $leftMargin;
          margin-right: 20px;
          width: $infoHeight;
          height: $infoHeight;
          background-color: #cccccc;
          img {
            width: $infoHeight;
            height: $infoHeight;
          }
        }
        .info-box {
          $lineHeight: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: $infoHeight;
          line-height: $lineHeight;
          color: white;
          .sheet-name {
            font-size: 16px;
          }
          .author-name {
            display: flex;
            align-items: center;
            font-size: 12px;
            img {
              @include circle($lineHeight);
              width: $lineHeight;
              height: $lineHeight;
            }
          }
        }
      }
    }
    .center-menu-bar {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin:0 auto;
      margin-top:10px;
      width:80%;
      height: $menuBarHeight;
      color:white;
      .menu-btn {
        display: flex;
        flex-direction: column;
        text-align: center;
        font-size:12px;
        i{
          font-size:20px;
          font-weight: 600;
        }
      }
    }
    .music-con {
      position:absolute;
      top:$infoPartHeight;
      bottom:0px;
      left:0px;
      right:0px;
      color:black;
      .music-control{
        height:$musicTopHeight;
        background-color: white;
        color:black;
        border-bottom: 1px solid $lightGrey;
        .left-menu,.right-menu{
          display: flex;
          align-items: center;
          height:$musicTopHeight;
          font-size:13px;
          .btn{
            height:100%;
            line-height: $musicTopHeight;
          }
        }
        .left-menu{

          color:black ;
          .play-all{
            @include flex-center;
            padding:0px 10px;
            height:100%;
            &:active{
              background-color: $lightGrey;
            }
          }
          i{
            font-size:18px;
          }
          .name{
            margin:0px 5px;
          }
          .count{
            color:$grey;
          }
        }
        .right-menu{
          flex-direction: row-reverse;
          text-align: right;
        }
      }
      .music-bar{
        display: flex;
        position:relative;
        .num,.menu-block{
          @include flex-center;
          width:$musicBarHeight;
          height:$musicBarHeight;
          font-size:$numSize;
          color:$grey;
        }
        .music-inner-bar{
          display: flex;
          position:absolute;
          top:0px;
          bottom:0px;
          left:$musicBarHeight;
          right:0px;
          justify-content: center;
          flex-direction: column;
          border-bottom: 1px solid $lightGrey;
          .name{
            font-size:14px;
          }
          .singer{
            font-size:12px;
            color:$grey;
          }
        }
        .menu-block{
          position:absolute;
          width:$musicBarHeight - 22px;
          right:0px;
          &:active{
            background-color: $lightGrey;
            i{
              color:black;
            }
          }

        }
      }
    }
    &.fly-enter-to, &.fly-leave-to {
      transition: all 0.3s;
    }
    &.fly-enter {
      transform: translate3d(0, 100%, 0);
    }
    &.fly-leave-to {
      transform:translate3d(-100%,0,0);
    }
  }
</style>
